/**********************地图初始化********************************************/
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
/**********************************************************************************/

/******************************一些初始控件**********************************/
var scaleCtrl = new BMapGL.ScaleControl(    // 添加比例尺控件
    {     //添加定位控件
        anchor: BMAP_ANCHOR_TOP_LEFT,    // 控件的停靠位置（可选，默认左上角）
        offset: new BMapGL.Size(130, 15)    // 控件基于停靠位置的偏移量（可选）
    }
);
map.addControl(scaleCtrl);        // 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl({
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    offset: new BMapGL.Size(22, 190)
});
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
var locationControl = new BMapGL.LocationControl({     //添加定位控件
    anchor: BMAP_ANCHOR_TOP_LEFT,    // 控件的停靠位置（可选，默认左上角）
    offset: new BMapGL.Size(85, 7)    // 控件基于停靠位置的偏移量（可选）
});
map.addControl(locationControl);
var navi3DCtrl = new BMapGL.NavigationControl3D({
    offset: new BMapGL.Size(10,80)
});  // 添加3D控件
map.addControl(navi3DCtrl);
/*******************************************************************************/



/************使用百度地图提供的api，解析字符串地址成坐标点****************/
/*var cityGeo = new BMapGL.Geocoder(); // 地址解析器
cityGeo.getPoint("防灾科技学院", function (res) {                   // 地址解析获取对应经纬度//cityGeo.getPoint("需要解析的地址"，回调方法，"地址所在城市")
    var marker = new BMapGL.Marker(new BMapGL.Point(res.lng, res.lat));
    map.addOverlay(marker);
}, "廊坊市");*/
/***************************************************/



/***************************精确定位*************************************/
var geolocation = new BMapGL.Geolocation();
var city;
//获取当前位置
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var address = r.address;
        alert('您的位置：'+address.province+','+address.city+','+address.district+','+address.street+','+address.streetNumber);
        map.centerAndZoom(r.point, 11);
        city = r.address.city; // 获取当前城市

        var mk = new BMapGL.Marker(r.point); //添加当前所在位置标记点
        map.addOverlay(mk);

        map.addControl(new BMapGL.MapTypeControl());   //添加地图类型控件
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    }
    else {
        alert('failed'+this.getStatus());
    }
});
/**************************************************************************************/



/***********************************路径生成**************************************/
document.getElementsByClassName("btn")[0].onclick = function(){
    map.clearOverlays();
    var startStr = document.getElementById("startStr").value;
    var endStr = document.getElementById("endStr").value;

    var output = "从 "+startStr+" 到 "+endStr+" 驾车: \n";
    var searchComplete = function (results){
        if (transit.getStatus() != BMAP_STATUS_SUCCESS){
            return ;
        }
        for (let i = 0; i < results.getNumPlans(); i++){
            let plan = results.getPlan(i);
            output += "路线:"+ i + "\n";
            output += plan.getDuration(true) + "\n";                //获取时间
            output += "总路程为：" ;
            output += plan.getDistance(true) + "\n\n";             //获取距离
        }

    }
    //驾车路线生成器
    var transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
        onSearchComplete: searchComplete,
        onPolylinesSet: function() {
            setTimeout(function () {
                alert(output)
            }, "1000");
        }});
    var cityGeo = new BMapGL.Geocoder(); // 地址解析器
    var startPoint , endPoint;

    cityGeo.getPoint(startStr, function (res) { // 地址解析获取 起始地 对应经纬度
        startPoint = new BMapGL.Point(res.lng, res.lat);

        cityGeo.getPoint(endStr, function (res) { // 地址解析获取 目的地 对应经纬度
            endPoint = new BMapGL.Point(res.lng, res.lat);
            transit.search(startPoint, endPoint);
        }, city);

    }, city);
}
/*************************************************************************************/




//百度地图 API 只提供了 2D 默认视角和俯视视角（即倾斜度为 0）供选择。
// 无法直接通过 API 切换到具有指定偏航角和倾斜度的 3D 视角。
// 如果要实现自定义的 3D 视角，可能需要借助其他地图引擎或 API（如三维地图引擎、WebGL 技术等）来实现。
// 这些引擎和技术通常提供了更复杂的地图操作和渲染能力。
/*设置2d、3d切换
map.setHeading(64.5);//设置地图的方向，单位为度。设定为64.5表示将地图朝东偏北旋转64.5度。
 map.setTilt(73);//设置地图的倾斜度，单位为度。设定为73表示将地图倾斜73度，提供一个倾斜的俯瞰效果。*/





/**************************添加自定义点坐标***************************/
var cityGeo = new BMapGL.Geocoder(); // 地址解析器
//cityGeo.getPoint("需要解析的地址"，回调方法，"地址所在城市")
cityGeo.getPoint("防灾科技学院", function (res) { // 地址解析获取对应经纬度
    var point = new BMapGL.Point(res.lng, res.lat); //根据解析的经纬度获取百度地图的坐标点
    var icon = new BMapGL.Icon('../image/cidp.png', new BMapGL.Size(40, 40)); //根据cidp.png图片设置一个icon
    // 建立3D标记点
    var marker = new BMapGL.Marker3D(point, Math.round(Math.random()) * 6000, {
        size: 80,
        icon: icon
    });
    //添加标记点到地图
    map.addOverlay(marker);
}, "廊坊市");
/*************************************************************************/



/********************* 创建图文信息窗口********************************/
/*var sContent = `<h4 style='margin:0 0 5px 0;'>防灾科技学院</h4>
    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='../image/fangzai.png' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
    防灾科技学院隶属于中国地震局，是全国仅有的以防灾减灾救灾高等教育为主、学科门类齐全的综合性全日制普通高等学校。
    </p>`;
var infoWindow = new BMapGL.InfoWindow(sContent);
// marker添加点击事件
marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow,point);
    // 图片加载完毕重绘infoWindow
    document.getElementById('imgDemo').onload = function () {
        infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
    };
});*/
/**************************************************************************/




/********注意这段代码的书写位置*****/
var marker = new BMapGL.Marker(point);// 创建点标记
map.addOverlay(marker);
/*****************************************************************/


